<template>
	<view class="address">
		<view class="address-card">
			<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx'" :padding="0" >
				<view class="input" >
				<uni-forms ref="valiForm" :recruits="rules" :modelValue="valiFormData">
					<uni-forms-item label="选择抬头" required name="name">
						<view class="o-t-title">
							<picker class="picker" :range="array" range-key="name" v-if="array.length > 0"
								@change="bindPickerChange">
								<view class="o-t-t-con">
										<text class="t-c-text" :class="array[index]?'':'t-c-text1'">{{array[index].name || '请选择抬头'}}</text>
										<uni-icons type="right" color="#999999" :size="'28r'"></uni-icons>
								</view>
							</picker>
							<view class="o-t-t-con1" v-else @click="addressClick1('add-invoice')">
								<text class="t-c-text">暂无抬头，请去添加抬头</text>
								<uni-icons type="right" color="#999999" :size="'28r'"></uni-icons>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="开票时间" required name="time">
						<picker class="picker" fields="month" mode="date" :value="valiFormData.time"
							:range="data.array" range-key="name" :start="startDate" :end="endDate"
							@change="getDate">
							<text class="uni-input" :class="valiFormData.time?'':'uni-input1'">{{valiFormData.time?valiFormData.time:'请选择时间'}}</text>
							<uni-icons type="right" color="#007aff" size="28r" />
						</picker>
					</uni-forms-item>
					<uni-forms-item label="邮寄地址" required name="address_id">
						<uni-easyinput style="display: none;" :clearable="false" type="digit" :inputBorder="false" class="input" v-model="valiFormData.address_id" placeholder="请输入金额" ></uni-easyinput>
						<view class="o-t-title">
							<!-- <image class="o-t-t-img" :src="imgUrl2" mode="aspectFit"></image> -->
							<picker class="picker"  :range="addressinfo" range-key="road" v-if="addressinfo.length > 0"
								@change="bindPickerChange1">
								<view class="o-t-t-con">
										<text class="t-c-text" :class="diziData.road?'':'t-c-text1'">{{diziData.road || '请选择地址'}}</text>
										<uni-icons type="right" color="#999999" :size="'28r'"></uni-icons>
								</view>
							</picker>
							<view class="o-t-t-con1" v-else @click="addressClick('address-up')">
								<text class="t-c-text">暂无地址，请去添加地址</text>
								<uni-icons type="right" color="#999999" :size="'28r'"></uni-icons>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="发票id" required name="invoice_id" style="display: none;">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.invoice_id" placeholder="请输入发票id" trim="both" />
					</uni-forms-item>
				</uni-forms>
				</view>
			</uni-card>
		</view>
		<view class="address-but">
			<button class="but" plain @click="addClick('valiForm')">申请发票</button>
		</view>
	</view>
</template>

<script>
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		// let day = date.getDate();
		if (type === 'start') {
			year = year - 3;
		}
		month = month > 9 ? month : '0' + month;;
		// day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}`;
	}
	export default {
		data() {
			return {
				
				url:'/hotelAdmin/my/address', // 跳转至添加地址路径
				url1:'/hotelAdmin/my/invoice', // 跳转至添加地址路径
				imgUrl2:`${getApp().globalData.imgScr}jd/dizhi_xiangqiye.png`,
				id:'',
				index:'',
				array:[],
				startDate: getDate('start'),
				endDate: getDate(),
				// 校验表单数据
				valiFormData: {
					invoice_id:'',
					time:'',
					address_id:'',
				},
				// 校验规则
				rules: {
					time: {
						recruits: [{
							required: true,
							errorMessage: '开票时间不能为空'
						}]
					},
					address_id: {
						recruits: [{
							required: true,
							errorMessage: '请选择邮寄地址'
						}]
					}
				},
				addressinfo:[], // 地址信息
				diziData:{}, // 渲染的地址信息
			};
		},
		onShow() {
			let _this = this
			this.getAddress()
			this.$http.post('/index/Hotelpersonal/invoice_list').
			then(function (res) {
				//这里只会在接口是成功状态返回
				_this.array = res
				_this.valiFormData.invoice_id = res[0].id
			}).catch(function (e) {
				//这里只会在接口是失败状态返回，不需要去处理错误提示
				uni.showToast({
					title: e.errMsg,
					icon:"none"
				})
				})
		},
		methods:{
			/**
			 * 申请开票按钮
			 */
			async addClick(ref) {
				let _this = this
				try {
					let res = await this.$refs[ref].validate()
					let data = await this.$http.post('/index/Hotelpersonal/appaly_invoice',res)
					// 返回到列表页
					uni.navigateBack({
					    delta: 1
					});
				}catch (err) {
					if(err.length > 0) {
						uni.showToast({
							title: err[0].errorMessage,
							icon:"none"
						})
					} else if(err.errMsg){
						uni.showToast({
							title: err.errMsg,
							icon:"none"
						})
					}
				}
			},
			/**
			 *  日期选择器触发
			 * @param {Object} e 日期选择后的数据
			 */
			getDate: function(e) {
				this.valiFormData.time = e.detail.value
			},
			/**
			 *  抬头选择器触发
			 * @param {Object} e 抬头选择后的数据
			 */
			bindPickerChange(e) {
				this.index = e.detail.value
				this.valiFormData.invoice_id = this.array[e.detail.value].id
			},
			/**
			 * 地址选择时触发
			 * @param {Object} e 选择的地址信息
			 */
			bindPickerChange1(e) {
				let index = e.detail.value * 1
				this.diziData = this.addressinfo[index]
				this.valiFormData.address_id = this.addressinfo[index].id
			},
			/** 添加地址
			 * @param {Object} path
			 */
			addressClick(path) {
				uni.navigateTo({
					url: `${this.url}/${path}/${path}?type=2`,
				});
			},
			/** 添加抬头
			 * @param {Object} path
			 */
			addressClick1(path) {
				uni.navigateTo({
					url: `${this.url1}/${path}/${path}`,
				});
			},
			async getAddress() {
				try{
					let res = await this.$http.post('/index/Hotelpersonal/hotel_address',{type:2})
					this.addressinfo = res
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title:e.errMsg,
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.address {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	.input-placeholder {
		font-size: 24rpx;
		color: rgba($color: #000000, $alpha: 0.5);
	}
	.address-card {
		flex: 1;
		overflow: auto;
		margin-bottom: 20rpx;
		.uni-card {
			border-radius: 20rpx;
			overflow: visible;
			.uni-card__header {
				padding: 6rpx 0;
			}
			.input {
				padding: 20rpx 20rpx;
				.uni-forms-item__inner {
					// padding: 0;
					.uni-forms-item__content {
						display: flex;
						flex-direction: row-reverse;
						align-items: center;
					}
				}
				.uni-input {
					line-height: 36px;
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					margin-right: 30rpx;
				}
				.uni-input1 {
					font-size: 26rpx;
					color: rgba($color: #000000, $alpha: 0.3);
				}
				.uni-easyinput__content-input, .uni-combox__input {
					text-align: right;
				}
			}
			// 添加地址
			.o-t-title {
				display: flex;
				align-items: center;
				width: 100%;
				box-sizing: border-box;
				border-radius: 20rpx;
				background-color: #FFFFFF;
				overflow: hidden;
			
				.o-t-t-img {
					width: 44rpx;
					height: 44rpx;
					margin-right: 40rpx;
				}
				.picker {
					flex: 1;
				}
				.o-t-t-con {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.t-c-text {
						font-size: 28rpx;
						font-weight: 500;
						color: #000000;
						margin-right: 30rpx;
					}
					.t-c-text1 {
						font-size: 26rpx;
						color: rgba($color: #000000, $alpha: 0.3);
					}
				}
				.o-t-t-con1 {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.t-c-text {
						font-size: 26rpx;
						font-weight: 500;
						color: rgba($color: #000000, $alpha: 0.3);
						margin-right: 30rpx;
					}
				}
			}
		}
	}
	.address-but {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 80rpx;
		margin-bottom: 40rpx;
		.but {
			flex: 1;
			color: #FFFFFF;
			background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
			border-radius: 40rpx;
			line-height: 80rpx;
			border: 0;
			margin: 0 20rpx;
		}
	}
}
</style>
